<template>
  <div>
    <div class="game_card">
      <div class="card_title">
        <div class="title_left">
          <img src="../../../assets/img/detail/ic_gift_card.png" alt="">
          <span>游戏礼包</span>
        </div>
        <div class="title_right" @click="$router.push('/userinfo/card')">
          <span>我的礼包</span>
          <img src="../../../assets/img/detail/bt_right.png" alt="">
        </div>
      </div>
      <ul class="card_box" v-if="gameinfo.cardlist">
        <li class="card_list" v-for="(item, index) in gameinfo.cardlist" :key="index">
          <div class="card_name">{{item.cardname}}</div>
          <div class="card_surplus">
            <span>剩余：</span>
            <div class="card_progress">
              <van-progress 
                :percentage="percentage[index]" 
                :show-pivot="false"
                color="#FF5543"
                track-color="#cccccc"/>
            </div>
            <span class="text_percentage">{{percentage[index]}}%</span>
            <span class="used_explain" @click="usedClick(index)">使用说明</span>
          </div>
          <div class="card_content">{{item.cardcontent}}</div>
          <div class="card_receive_btn">领取</div>
        </li>
      </ul>
      <img v-else class="card_jynone" src="../../../assets/img/detail/jy_none1.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    gameinfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      // percentage: [100,10,20,30,40,20],
    }
  },
  methods: {
    usedClick(index) {
      this.$emit('used-click', index)
    }
  },
  computed: {
    percentage() {
      if(this.gameinfo.cardlist) {
        var arr = this.gameinfo.cardlist
        var newarr = []
        arr.forEach(item => {
          var cardcountall = parseInt(item.cardcountall)
          var cardkucun = item.cardkucun
          var num = parseInt(cardkucun / cardcountall * 100)
          newarr.push(num)
        });
        return newarr
      }
    }
  },
}
</script>

<style lang="less" scoped>
.game_card {
  box-sizing: border-box;
  width: 9.2rem;
  margin: 0 .4rem 2.666667rem;
  padding: .266667rem 0 0;
  height: auto;
  // background: #ffffff;
  border-radius: .213333rem;
  font-size: .32rem;
}

.card_title {
  padding: 0 .266667rem;
  font-size: 0.426667rem;
  font-weight: 700;
  color: #222222;
  line-height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card_title img {
  width: .346667rem;
  height: .346667rem;
  margin-right: 0.133333rem;
}

.title_right {
  font-size: .32rem;
  color: #444;
  display: flex;
  align-items: center;
}

.title_right img {
  width: .32rem;
  height: .32rem;
}

.card_list {
  position: relative;
  box-sizing: border-box;
  padding: .4rem;
  width: 9.2rem;
  height: 2.133333rem;
  background: #fff;
  border-radius: .266667rem;
  margin-top: .133333rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card_name {
  font-size: .32rem;
  font-weight: bold;
  color: #333333;
}

.card_surplus,
.card_content {
  font-size: .293333rem;
  color: #666;
}

.card_surplus {
  display: flex;
  align-items: center;
}

.card_progress {
  width: 2.266667rem;
}

.text_percentage {
  padding-left: .133333rem;
}

.used_explain {
  padding-left: .666667rem;
  color: #0878FF;
  text-decoration: underline;
}

.card_content {
  width: 8.4rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.card_receive_btn {
  position: absolute;
  top: .746667rem;
  right: .4rem;
  width: 1.36rem;
  height: .64rem;
  background: linear-gradient(-47deg, #FF5543, #FF9100);
  border-radius: .32rem;
  text-align: center;
  line-height: .64rem;
  color: #fff;
  font-size: .293333rem;
}

.card_jynone {
  width: 8.666667rem;
  margin: .666667rem;
}
</style>